<template>
  <!-- <div class="viewPDF">
    <pdf
      ref="pdf"
      :src="src"
      :page="currentPage"
      :rotate="pageRotate"
      @num-pages="pageCount = $event"
      @page-loaded="currentPage = $event"
      @loaded="loadPdfHandler"
    ></pdf>
    <div class="bottom">
      <el-button size="small" type="button" @click="changePdfPage(0)">上一页</el-button>
      <el-button size="small" type="button" @click="changePdfPage(1)">下一页</el-button>
      <span>{{ currentPage }} / {{ pageCount }}</span>
    </div>
  </div> -->
  <div class="viewPDF">
    <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/9.png" alt="">
    <p class="p2" style="color: black; font-size: 20px">导出成功</p>
    <p class="p1">1、点击复制链接</p>
    <p class="p1">2、打开浏览器即可下载文件</p>
    <div class="bottom">
      <el-button class="tag-read" :data-clipboard-text="src" style="width: 80%" type="primary" @click="changePdfPage"
        >复制链接</el-button
      >
    </div>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
// import pdf from "vue-pdf";
export default {
  name: "viewPDF",
  data() {
    return {
      src: "",
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      scale: 100,
      pageRotate: 0,
    };
  },
  components: {
    // pdf,
  },
  mounted() {
    this.src = this.$route.query.data;
    ZWJSBridge.setTitle({
      title: "导出通知",
    })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    changePdfPage() {
      // ZWJSBridge.setClipboardData({
      //   text: this.src
      // })
      //   .then((res) => {
      //     this.$toast.success("复制成功");
      //   })
      //   .catch((err) => {
      //     this.$toast.fail("复制失败");
      //   });
       var clipboard = new Clipboard('.tag-read')
       console.log(clipboard)
        clipboard.on('success', e => {
          this.$toast.success("复制成功");
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          this.$toast.fail("复制失败");
          // 释放内存
          clipboard.destroy()
        })
    },
    // pdf加载时
    // loadPdfHandler(e) {
    //   // e;
    //   this.currentPage = 1; // 加载的时候先加载第一页
    // },
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    // changePdfPage(val) {
    //   if (val === 0 && this.currentPage > 1) {
    //     this.currentPage--;
    //   }
    //   if (val === 1 && this.currentPage < this.pageCount) {
    //     this.currentPage++;
    //   }
    // },
    //放大
    // scaleD() {
    //   this.scale += 5;
    //   this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    // },
    //缩小
    // scaleX() {
    //   if (this.scale === 100) {
    //     return;
    //   }
    //   this.scale += -5;
    //   this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    // },
    // 顺时针
    // clock() {
    //   this.pageRotate += 90;
    // },
    // 逆时针
    // counterClock() {
    //   this.pageRotate -= 90;
    // },
  },
};
</script>

<style scoped lang='scss'>
.viewPDF {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  transform: translateY(30%);
  .p2 {
    text-align: center;
    line-height: 44px;
  }
  img{
    display: block;
    margin: 0 auto;
  }
  .p1 {
    text-align: center;
    line-height: 30px;
  }
  /* border: 2px solid #409eff;
  padding: 10px; */
  .bottom {
    width: 100vw;
    padding-top: 10px;
    /* margin: 0 auto; */
    position: absolute;
    // left: 50%;
    transform: translateX(10%);
  }
}
</style>
